<template>
  <view class="teacherCourseCenter">
    <button type="primary" class="btn" size="default" @click="btnClickHandler">添加新课程</button>
  </view>
  <uni-grid
    :column="2"
     :highlight="false"
      :show-border="false"
      
  >
    <uni-grid-item class="modal-item" v-for="item in courseList" :key="item.id">

      <view @longpress="longpress(item)"  @click="courseClickHandler(item)" class="module-item-bg">
       <view >{{ item.name }}</view>
        <view class="code"><text>邀请码：{{item.invitationCode}}</text> </view>
      </view>  
      </uni-grid-item>
  </uni-grid>
  <uni-popup
    ref="popup"
    type="center"
  >
  <view class="popup-wrap">
     <uni-forms
      ref="form"
    >
      <uni-forms-item
        required
        label="课程名称"
        name="name"
        label-width="150rpx"
        
      >
        <uni-easyinput
          v-model="course.name"
          type="text"
          placeholder="请填写课程名称"
        />
      </uni-forms-item>
      <button type="primary" @click="submitHandler" >添加课程</button>
    </uni-forms>
  </view>
   
  </uni-popup>
</template>

<script  setup>
import { newCourse,getCourseList } from "@/api/courseApi"
import { onLoad } from "@dcloudio/uni-app"
const longpress=(data)=>{
  uni.setClipboardData({
    data:data.invitationCode,
    success:(success)=>{
      if(success){
        msgSuccess("复制邀请码成功")
      }
    },
  })
}
const popup=ref(null)
const courseList=ref([])
const btnClickHandler=()=>{
  popup.value.open()
}
const courseClickHandler=(course)=>{
  uni.navigateTo({
    url:`/pages/CoursePage/CoursePage?id=${course.id}`,
  })
}
const course=ref({
  name:""
})
const submitHandler=()=>{
  if(!course.value.name){
    msgError("请先填写课程名称")
    return 
  }
  newCourse(course.value).then(res=>{
    msgSuccess("添加课程成功")
     popup.value.close()
    getCourseListData()
  })
}
const getCourseListData=()=>{
  getCourseList().then(res=>{
    if(Array.isArray(res.data)){
      courseList.value=res.data
    }
  })
}
onLoad(()=>{
  getCourseListData()
  
})


</script>

<style lang="scss" scoped>
.btn{
  width: 600rpx;
  border-radius: 999rpx;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  background:linear-gradient(#ffd000, rgb(236, 206, 34)) ;
}
   $modal-height: 200rpx;
  .modal-item {

    width: 360rpx;
    height:200rpx;
    font-size: 50rpx;
    border : 1px solid;
    border-radius: 40rpx;
    // margin-bottom: 100rpx;
    background: linear-gradient(#0ed45a, #098656);
    color: #fff;
    .module-item-bg{
    width: 360rpx;
    height:200rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .code{
        font-size:30rpx ;
        color: #d8d1d1;
      }
    }
  }
  .popup-wrap{
    width: 80vw;
    padding: 50rpx 20rpx;
    border-radius:20rpx ;
    background-color: #fff;
    height: 30vh;
  }

</style>